<template>
	<view>
		<view class="title-box">
			<!-- <view class="title">历史记录</view> -->
			<view class="delete icon-shanchu" @tap="clear"></view>
		</view>
		<view v-for="item in historyList" :key="item.contractId" class="history-item">
			{{ item.createDate }}
			<view class="item-box">
				<view class="left">
					<image class="item-image" :src="item.image[0]" mode="scaleToFill"
						@tap="navToDetail(item.contractId)" />
				</view>
				<view class="right">
					<view class="item-desc">
						{{ item.description }}
					</view>
					<view class="item-row">
						<view class="item-price">
							{{ item.price }}¥
						</view>
						<view class="item-button">
							<button class="uni-button" type="primary" size="mini" @click="navToDetail(item.contractId)">查看详情</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getHistory, clearHistroy } from '../../services/history'
import { onLoad } from '@dcloudio/uni-app';
import { HouseDetails } from '/@/types/house';

const historyList = ref<HouseDetails[]>([])
onLoad(
	() => {
		getHistory().then(res => {
			historyList.value = res.data
		})
	}
)
const clear = () => {
	uni.showModal({
		title: '清空历史记录',
		content: '确认清空历史记录？',
		success: (success) => {
			if (success.confirm) {
				clearHistroy()
			}
		},
		fail: (fail) => {
			console.log(fail)
		},
	})

}
const navToDetail = (contractId: number) => {
	uni.navigateTo({
		url: '/pages/contract/contractDetail?contractId=' + contractId
	})

}
</script>

<style scoped>
.title-box {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}

.delete {
	text-align: right;
}

.item-image {
	width: 85px;
	height: 75px;
	margin-right: 10px 0px;
	border-radius: 5px;
	margin-right: 10px;
	margin-left: 10px;
}

.item-box {
	display: flex;
	
}

.item-price{
	color: #ff0000;

}
.item-dec{
	color: #666;
}
.history-item {

	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 15px;
	font-size: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item-row{
	display: flex;
	justify-content: space-between;
}
</style>
